<template>
  <div>
    <div class="wrap">
      <div class="orderKindsWrap">
        <div class="kindsTitle">
          <img src="@/assets/warning.png" alt="" class="waringImg" />
          <em class="watting">待评价</em>
        </div>
        <div class="explain">您需要在xx时间内做出评价，超时自动好评</div>
      </div>
      <div class="title">收货信息</div>
      <div class="infoList">
        <div class="left">
          <div class="infoItem">
            <img src="@/assets/name.png" alt="" />
            <em>李大宝</em>
          </div>
          <div class="infoItem">
            <img src="@/assets/tel.png" alt="" />
            <em>15282094560</em>
          </div>
          <div class="infoItem">
            <img src="@/assets/addr2.png" alt="" />
            <em>成都市武侯区锦悦西路环球中心</em>
          </div>
        </div>
        <!-- <img src="@/assets/rightArrow.png" alt="" class="rightArrow" /> -->
      </div>
      <div class="title">商品信息</div>
      <div class="productionList" @click="jumpShopInfo">
        <div class="productionItem">
          <div class="proTitle">
            <div class="proLeft">
              鬼灭之刃动漫店
              <img src="@/assets/rightArrow.png" alt="" class="rightArrow2" />
            </div>
            <div class="proRight">待付款</div>
          </div>
          <div class="proIntroWrap">
            <div class="proIntroLeft">
              <img src="@/assets/dele/goods.png" alt="" class="proPoster" />
              <em class="orderStatus">已退款</em>
            </div>
            <div class="proIntroRight">
              <div class="proIntro">
                只卖关于动漫一切周边，欢迎喜爱动漫的二刺猿光临小店，这里有海、手办、cos道具服装等...
              </div>
              <div class="workTime">
                <div class="timeLeft">XXX商品 ×1</div>
                <div class="saleRight"><em class="moneyLogo">￥</em>188</div>
              </div>
            </div>
          </div>
          <div class="totalCount">
            总价¥1630 优惠¥120
            <em class="realPay">实付</em>
            <em class="realMoney">￥1510</em>
          </div>
        </div>
      </div>
      <div class="title">订单信息</div>
      <div class="infoList infoList2">
        <div class="lineWrap">
          <div class="leftLine">订单编号</div>
          <div class="rightLine">151245748541212</div>
        </div>
        <div class="lineWrap">
          <div class="leftLine">店铺优惠</div>
          <div class="rightLine">满30减5元</div>
        </div>
        <div class="lineWrap">
          <div class="leftLine">订单备注</div>
          <div class="rightLine">无</div>
        </div>
        <div class="lineWrap">
          <div class="leftLine">付款时间</div>
          <div class="rightLine">2020-01-01，01：02：00</div>
        </div>
        <div class="lineWrap">
          <div class="leftLine">接单时间</div>
          <div class="rightLine">2020-01-01，01：02：00</div>
        </div>
        <div class="lineWrap">
          <div class="leftLine">送达时间</div>
          <div class="rightLine">2020-01-01，01：02：00</div>
        </div>
      </div>
    </div>

    <div class="bottomWrap">
      <div class="sureSubmit" @click="jumpCommentInfo">评价</div>
      <div class="sureSubmit sureSubmit2" @click="jumpAfterSale">售后</div>
    </div>
  </div>
</template>

<script>
import { Overlay } from "vant";
export default {
  name: "App",
  data() {
    return {};
  },
  mounted() {},
  methods: {
    jumpShopInfo() {
      this.$router.push({
        path: "/pages/shopInfo",
        query: {
          //传递参数
        },
      });
    },
    jumpCommentInfo(){
       this.$router.push({
        path: "/pages/nowComment",
        query: {
          //传递参数
        },
      });
    },
    jumpAfterSale(){
       this.$router.push({
        path: "/pages/chooseAfterSaleList",
        query: {
          //传递参数
        },
      });
    }
    
  },
  created() {},
  components: {
    [Overlay.name]: Overlay,
  },
};
</script>

<style scoped>
.wrap {
  background: #f2f4fa;
  padding: 15px;
  min-height: calc(100vh - 70px);
}
.orderKindsWrap {
  width: calc(100% - 44px);
  background: #ffffff;
  border-radius: 20px;
  padding: 30px 22px;
  margin-bottom: 20px;
}

.kindsTitle {
  font-size: 16px;
  font-weight: bold;
  color: #f9a31f;
  display: flex;
  justify-content: center;
}
.watting {
  /* padding-bottom: 10px; */
  align-items: center;
  display: inline-block;
  margin-top: 8px;
}
.waringImg {
  width: 45px;
  height: 45px;
}
.explain {
  text-align: center;
  font-size: 12px;
  font-weight: 400;
  color: #666666;
}
.title {
  font-size: 13px;
  font-weight: 400;
  color: #999999;
  margin: 9px 0px;
}
.infoList {
  overflow: hidden;
  width: calc(100% - 30px);
  background: #ffffff;
  border-radius: 20px;
  padding: 15px 15px 5px 15px;
  margin-bottom: 20px;
}
.left {
  float: left;
}
.infoItem {
  height: 20px;
  line-height: 20px;
  display: flex;
  margin-bottom: 15px;
}
.infoItem img {
  width: 17px;
  height: auto;
  align-items: center;
  padding-right: 15.5px;
}
.infoItem em {
  font-size: 14px;
  font-weight: 400;
  color: #000000;
}
.rightArrow {
  float: right;
  width: 5px;
  height: 9px;
  margin-top: 40px;
}

.productionList {
}
.productionItem {
  /* width: calc(95% - 30px);
  margin: 0 auto;
  min-height: 130px;
  background: #ffffff;
  border-radius: 20px;
  padding: 15px;
  margin-top: 15px; */

  width: calc(100% - 30px);
  background: #ffffff;
  border-radius: 20px;
  padding: 15px 15px 5px 15px;
  margin-bottom: 20px;
}
.proTitle {
  width: 100%;
  font-size: 15px;
  font-weight: 500;
  color: #000;
  display: flex;
  justify-content: space-between;
}
.proLeft {
}
.proRight {
}
.rightArrow2 {
  width: 5px;
  height: 9px;
  padding-bottom: 1px;
}
.proIntroWrap {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
}
.proIntroLeft {
  position: relative;
  width: 32%;
  height: 75px;
}
.proPoster {
  width: 100%;
}
.orderStatus {
  position: absolute;
  bottom: -9px;
  right: 0px;
  /* width: 45px; */
  height: 20px;
  line-height: 20px;
  padding: 0px 5px;
  background: #f48f5b;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 500;
  color: #ffffff;
  text-align: center;
}
.proIntroRight {
  width: 65%;
  margin-top: 10px;
}
.proIntro {
  font-size: 10px;
  font-weight: 400;
  color: #181818;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
em {
  font-style: normal;
}
i {
  display: inline-block;
  width: 1px;
  height: 10px;
  background-color: #ff5252;
  margin: 0px 2px;
}
.workTime {
  width: 100%;
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  font-weight: 400;
  color: #999999;
  margin-top: 15px;
}
.timeLeft {
}
.saleRight {
  color: #ff5757;
  font-size: 15px;
}
.moneyLogo {
  font-size: 10px;
}
.totalCount {
  color: #999999;
  font-size: 13px;
  text-align: right;
  width: 100%;
  margin-top: 20px;
}
.realPay {
  color: #181818;
  padding-left: 10px;
}
.realMoney {
  color: #ff5757;
}
.infoList2 {
  margin-bottom: 100px;
}
.lineWrap {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}
.leftLine {
  font-size: 14px;
  font-weight: 600;
  color: #010101;
}
.rightLine {
  font-size: 14px;
  font-weight: 300;
  color: #010101;
}
.bottomWrap {
  width: 100%;
  height: 70px;
  line-height: 70px;
  background: #ffffff;
  box-shadow: 0px 3px 12px 0px rgba(0, 0, 0, 0.12);
  border-radius: 20px 20px 0px 0px;
  position: fixed;
  bottom: 0px;
}

.sureSubmit {
  float: right;
  margin-right: 15px;
  width: 95px;
  height: 34px;
  line-height: 34px;
  background: #181818;
  border-radius: 17px;
  font-size: 14px;
  font-weight: 500;
  color: #ffffff;
  margin-top: 15px;
  text-align: center;
}

.sureSubmit2 {
  background-color: #fff;
  border: 1px solid #181818;
  color: #181818;
}
</style>
